<template>
    <div class="releaseInfo">
        <u-form :model="form" ref="uForm">
            <!-- 信息 -->
            <div class="form1">
                <u-form-item :label="$t('所在城市')" label-width="40%">
                    <u-input type="select" v-model="form.city_name" input-align="right" :placeholder="$t('请输入')"
                        @click="goSelectCity" />
                </u-form-item>
                <u-form-item :label="$t(filterHouseName)" label-width="30%">
                    <u-input v-model="form.house_name" input-align="right" :placeholder="$t('请输入')" />
                </u-form-item>
                <u-form-item :label="type == '3' ? $t('具体地址') : $t('房源具体地址')" label-width="40%">
                    <u-input v-model="form.address" input-align="right" :placeholder="$t('请输入')" />
                </u-form-item>
                <u-form-item :label="type == '3' ? $t('总面积') : $t('房源总面积')" label-width="40%">
                    <u-input v-model="form.total_area" input-align="right" :placeholder="$t('请输入')" />
                </u-form-item>
                <u-form-item v-if="type !== '3'" :label="$t('房源户型')" label-width="30%">
                    <u-input type="select" v-model="dropText.house_type" input-align="right" :placeholder="$t('请输入')"
                        @click="opendropDown('house_type')" />
                </u-form-item>
                <!-- 土地 -->
                <div class="land" v-if="type == '3'">
                    <u-form-item :label="$t('土地年限')" label-width="30%">
                        <u-input v-model="form.planting_years" input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                    <u-form-item :label="$t('转让说明')" label-width="30%">
                        <u-input type="textarea" :maxlength="50" v-model="form.transfer_desc" input-align="right"
                            :placeholder="$t('请输入')" />
                    </u-form-item>
                </div>
                <!-- 租房 -->
                <div class="rentAHouse" v-if="type == 2">
                    <u-form-item :label="$t('租房方式')" label-width="30%">
                        <u-input type="select" @click="opendropDown('lease_mode')" v-model="dropText.lease_mode"
                            input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                    <u-form-item :label="$t('朝向')" label-width="30%">
                        <u-input type="select" @click="opendropDown('orientation')" v-model="dropText.orientation"
                            input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                    <u-form-item :label="$t('租期')" label-width="30%">
                        <u-input type="select" @click="opendropDown('lease_term')" v-model="dropText.lease_term"
                            input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                    <u-form-item :label="$t('电梯')" label-width="30%">
                        <u-input type="select" @click="opendropDown('elevator')" v-model="dropText.elevator"
                            input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                    <u-form-item :label="$t('装修')" label-width="30%">
                        <u-input type="select" @click="opendropDown('renovation')" v-model="dropText.renovation"
                            input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                    <u-form-item :label="$t('家电')" label-width="50%">
                        <u-input type="select" @click="checkboxShow = true" v-model="form.household_electrical_name"
                            input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                </div>
            </div>
            <!-- 文件上传 -->
            <div class="form2">
                <div class="title">{{ $t('文件上传') }}</div>
                <div class="uploadFile">
                    <div class="item">
                        <div class="text">{{ $t('房产文件') }}</div>
                        <image v-if="form.house_file" src="/static/icons/document.png"
                            @click="uploadRealEstate('house_file')" />
                        <image v-else src="/static/icons/upload1.png" alt="" @click="uploadRealEstate('house_file')" />
                    </div>
                    <div class="item">
                        <div class="text">{{ $t('房产证明文件') }}</div>
                        <image v-if="form.house_prove_file" src="/static/icons/document.png"
                            @click="uploadRealEstate('house_prove_file')" />
                        <image v-else src="/static/icons/upload1.png" alt=""
                            @click="uploadRealEstate('house_prove_file')" />

                    </div>
                </div>
            </div>
            <!-- 信息 -->
            <div class="form3">
                <!-- 新房 -->
                <div class="newHouse" v-if="type == 1">
                    <u-form-item :label="$t('在售状态')" label-width="30%">
                        <u-input type="select" @click="opendropDown('on_sale_status')" v-model="dropText.on_sale_status"
                            input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                    <u-form-item :label="$t('开盘时间')" label-width="30%">
                        <u-input v-model="form.opening_status" input-align="right" :placeholder="$t('请输入')" />
                    </u-form-item>
                </div>
                <u-form-item :label="$t(filterPrice)" label-width="45%">
                    <u-input v-model="form.price" input-align="right" :placeholder="$t('请输入')" />
                </u-form-item>
                <u-form-item :label="$t('姓名')" label-width="30%">
                    <u-input v-model="form.name" input-align="right" :placeholder="$t('请输入')" />
                </u-form-item>
                <u-form-item :label="$t('联系方式')" label-width="40%">
                    <u-input v-model="form.contract_mobile" input-align="right" :placeholder="$t('请输入')" />
                </u-form-item>
                <!-- 上传视频图片 -->
                <div class="uploadAudioVideo">
                    <div class="title" :action="action" @uploadImg="uploadDocument(3)">{{ $t('上传视频图片') }}</div>
                    <div class="uplode">
                        <!-- 图片 -->
                        <div class="item">
                            <Upload :imgStyle="imgStyle" :deletable="true" :maxCount="5" :fileList="fileList" type="file"
                                :action="action" width="140" height="140" @onRemove="onRemove" @onUploaded="onUploaded">
                                <template #customize>
                                    <image src="/static/icons/upload2.png" />
                                </template>
                            </Upload>
                            <text>{{ $t('图片') }}({{ $t('最多上传5张') }})</text>
                        </div>
                        <!-- 视频 -->
                        <div class="item">
                            <!-- <img src="v-fo" alt=""> -->
                            <div class="uplodVideo">
                                <htz-image-upload mediaType="video" :max="1" v-model="ceshiData"
                                    @uploadSuccess="uploadSuccess" :action="action" :formData="formData" name="img">
                                </htz-image-upload>
                            </div>

                            <!-- <image v-if="form.video" src="/static/icons/document.png"
                                @click="uploadRealEstate('video')" />
                            <image v-else src="/static/icons/upload2.png" alt="" @click="uploadRealEstate('video')"
                                style="width:90rpx;height: 90rpx;" /> -->
                            <text>{{ $t('视频') }}</text>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 标题 -->
            <div class="form4 heading">
                <u-form-item :label="$t('标题')" label-width="30%">
                    <u-input maxlength="20" v-model="form.title" input-align="right" :placeholder="$t('请输入')" />
                </u-form-item>
            </div>
            <!-- 发布流程 -->
            <div class="form5 process">
                <div class="title">
                    {{ $t('发布流程介绍') }}
                </div>
                <!-- <u-steps :list="numList" direction="column" :current="1"></u-steps> -->
                <image src="http://app.maifangqi.com/imgs/ywd/process_1.png" />
            </div>
        </u-form>
        <div class="submit">
            <u-button type="primary" @click="submit()">{{ $t('提交') }}</u-button>
        </div>
        <!-- 下拉框 -->
        <u-action-sheet :list="actionSheetList" v-model="show" @click="dropDownSelect">
        </u-action-sheet>
        <!-- 下拉多选框 -->
        <u-popup v-model="checkboxShow" mode="bottom" height="300">
            <view class="popup">
                <u-checkbox-group @change="checkboxGroupChange">
                    <u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="index">
                        {{ item.name }}
                    </u-checkbox>
                </u-checkbox-group>
                <div class="btns">
                    <div class="bottom sure" @click="checkedValue">{{ $t('确定') }}</div>
                </div>
            </view>
        </u-popup>
    </div>
</template>

<script>
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
import Upload from '@/components/Upload'
import { uploadFiles } from '@/common/utils/index'
import $config from '@/api/http.baseUrl.js'
export default {
    name: 'releaseInfo',
    components: {
        Upload,
        htzImageUpload,
    },
    onLoad(options) {
        this.id = options.id
        this.type = this.form.type = options.type
        uni.setNavigationBarTitle({
            title: options.name
        })
        this.getConf()
        this.getDetail()
    },
    computed: {
        filterPrice() {
            switch (this.type) {
                case '0':
                    return '期望单价'
                case '1':
                    return '单价'
                case '2':
                    return '租金单价/月'
                case '3':
                    return '单价/月'
            }
        },
        filterHouseName() {
            switch (this.type) {
                case '0':
                    return '房源小区'
                case '1':
                    return '楼盘名称'
                case '2':
                    return '房源小区'
                case '3':
                    return '土地名称'
            }
        }
    },
    data() {
        return {
            ceshiData: [],
            formData: {
                'type': 'file'
            },
            id: '',
            action: `${$config.baseUrl}/system/basic/postUploadOne`,
            fileList: [],
            type: 0,
            name: '',
            // 城市弹窗
            pickerShow: false,
            // 上传img 样式
            imgStyle: {
                width: '94rpx',
                height: '94rpx',
            },
            labelStyle: {
                textAlign: 'center',
            },
            // 步骤条
            numList: [{
                name: '下单'
            }, {
                name: '出库'
            }, {
                name: '运输'
            }, {
                name: '签收'
            },],
            form: {
                city_id: '',
                city_name: '',
                type: '',
                name: '',
            },
            checkboxShow: false,
            show: false,
            confList: '',
            // 当前下拉数据
            currentDrop: '',
            actionSheetList: [],
            //所有下拉数据
            dropDown: {},
            //下拉展示的文字
            dropText: {

            },
            // 多选数据
            checkboxList: [],
            // 选中checkbox的数据
            household_electrical: [], //选中序号
            household_electrical_name: [], //名称
        };
    },
    methods: {
        // 视频上传
        uploadSuccess(res) {
            var _res = JSON.parse(res.data);
            console.log(_res);
            if (_res.code == 1) {
                this.ceshiData.push(_res.path);
                this.form.video = _res.id
                console.log(this.ceshiData);
            }
        },
        submit() {
            console.log(this.form);
            this.$u.api.edit(this.form).then(res => {
                console.log(res);
                if (res.code === 1) {
                    this.$u.toast(res.msg)
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 500)
                }
            })
        },
        // 获取详情 数据转换
        getDetail() {
            this.$u.api.detail({ id: this.id, from: '1' }).then(res => {
                this.form = res.data.data
                //图片转换
                this.fileList = res.data.data.imgs_path.reduce((e, i) => {
                    { e.push({ url: i }) }
                    return e
                }, [])
                //下拉框数据配置 转换文字
                const { house_type, orientation, lease_term, elevator, renovation, on_sale_status, lease_mode } = res.data.data
                const configuration1 = [house_type, orientation, lease_term, elevator, renovation, on_sale_status, lease_mode]
                const configuration2 = ['house_type', 'orientation', 'lease_term', 'elevator', 'renovation', 'on_sale_status', 'lease_mode']
                configuration2.forEach((el, index) => {
                    this.dropText[el] = this.dropDown.get(el)[configuration1[index]]
                })
                this.ceshiData.push(res.data.data.video_path[0]);
                //家电多选转换
                if (this.type == 2) {
                    const { household_electrical, household_electrical_name } = res.data.data
                    this.form.household_electrical_name = household_electrical_name
                    this.household_electrical = household_electrical.split(',')
                    //勾选checkbox
                    this.household_electrical.forEach(el => {
                        this.checkboxList[el].checked = true
                    })
                }
            })
        },
        //上传文件
        uploadRealEstate(value) {
            uploadFiles().then(res => {
                console.log(res);
                this.form[value] = res.id
            })
        },
        // 上传成功触发
        uploadFile(id, index) {
            this.form[index] = id
        },
        //删除图片触发
        onRemove(data) {
            this.imgToStc(data, 'imgs')
        },
        // 全部上传完成触发
        onUploaded(data) {
            this.imgToStc(data, 'imgs')
        },
        // 获取所有图片id,转字符串
        imgToStc(data, el) {
            let img = []
            data.forEach(el => {
                img.push(el.response.id)
            })
            this.form[el] = img.join(',')
        },
        // 打开下拉框 当前数据处理
        opendropDown(ele) {
            this.show = true
            this.currentDrop = ele
            console.log(this.dropDown.get(ele));
            let value = this.dropDown.get(ele)
            var res = value.reduce((e, i) => {
                { e.push({ text: i }) }
                return e
            }, [])
            this.actionSheetList = res
        },
        // 选中下拉框的数据
        dropDownSelect(index) {
            this.form[this.currentDrop] = index //提交的值
            this.dropText[this.currentDrop] = this.actionSheetList[index].text // 显示的值
        },
        // 选中任一checkbox时，由checkbox-group触发
        checkboxGroupChange(e) {
            console.log(e);
            this.form.household_electrical = e.join(',');
            let arr2 = []
            e.forEach(el => {
                arr2.push(this.household_electrical_name[el])
            })
            this.form.household_electrical_name = arr2.join(',');
        },
        // 确定
        checkedValue() {
            this.checkboxShow = false;
        },
        //获取全局配置
        getConf() {
            this.$u.api.conf().then(res => {
                const { house_type, orientation, lease_term, elevator, renovation, household_electrical, on_sale_status, lease_mode } = res.data
                this.dropDown = new Map([
                    ['house_type', house_type],
                    ['orientation', orientation],
                    ['lease_term', lease_term],
                    ['elevator', elevator],
                    ['renovation', renovation],
                    ['household_electrical', household_electrical],
                    ['on_sale_status', on_sale_status],
                    ['lease_mode', lease_mode],
                ])
                var checkList = household_electrical.reduce((e, i) => {
                    {
                        e.push({ name: i, checked: false });
                    }
                    return e;
                }, []);
                this.household_electrical_name = household_electrical
                this.checkboxList = checkList;
            })
        },
        //城市选择
        goSelectCity() {
            this.$u.route('pages/client/components/selectCity', {
                from: 'revise'
            })
        },
    }
};
</script>

<style lang="scss" scoped>
::v-deep .u-form-item {
    margin: 0 20rpx;
}

::v-deep .u-form-item--left__content__label {
    color: $homeBlack;
    font-size: 28rpx;
}

.form1,
.form2,
.form3,
.form4,
.form5 {
    margin-bottom: 20rpx;
    background: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);

    .title {
        position: relative;
        display: inline;
        border-bottom: 2rpx solid #f8f8f8;
        padding-bottom: 30rpx;
        font-weight: bold;
        font-size: 28rpx;
        z-index: 99;

        &::before {
            @include yellowDecorate($bottom: 30rpx)
        }
    }


}

.form2 {
    padding: 30rpx 20rpx;

    .title {
        border-bottom: 2rpx solid #f8f8f8;
        padding-bottom: 30rpx;
    }

    .uploadFile {
        margin-top: 30rpx;
        @include flex($justify: space-between);

        .item {
            @include flex($justify: center, $aligin: center);
            width: 316rpx;
            height: 130rpx;
            background: #f8f8f8;
            border-radius: 20rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: $homeBlack;

            .text {
                margin-right: 40rpx;
            }

            image {

                width: 74rpx;
                height: 74rpx;
            }
        }
    }

}

.form3 {
    .uploadAudioVideo {
        padding: 30rpx 20rpx;

        .title {
            border-bottom: none;
        }

        .uplode {
            margin-top: 20rpx;

            .item {
                text-align: center;

                image {
                    display: block;
                    width: 140rpx;
                    height: 140rpx;
                }

                // @include flex;
                text {

                    color: rgb(192, 196, 204);
                }
            }


        }
    }


}

.form5 {
    padding: 30rpx;
}

.submit {
    margin: 40rpx auto 50rpx;
    width: 600rpx;
}

.releaseInfo {
    height: 100vh;
    margin: 20rpx;
}

.popup {
    padding: 20rpx;

    .btns {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .bottom {
        @include flex($justify: center, $aligin: center);
        border-top: 4rpx solid #eaeaec;
        height: 100rpx;
    }
}

.process {
    image {
        margin-top: 30rpx;
    }
}
</style>